<!-- 黑名单 -->
<template>
    <view class="sustem-setting">
        <scroll-view :scroll-top="state.scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
            @scrolltolower="lower">
            <view class="blacklist-item" v-for="item in state.listData" :key="item.ID">
                <view class="blacklist-item-left">
                    <van-image round width="100rpx" height="100rpx" fit="cover" :src="item.Avatar" />
                    <view class="name-base-info">
                        <view class="name">{{ item.ShowName }}</view>
                        <view class="base-info">{{ strInfo(item) }}</view>
                    </view>
                </view>
                <view class="blacklist-item-right" @click="removeNoDisplayUse(item)">
                    <img src="@/assets/image/icon129.png" />
                    <view>移除黑名单</view>
                </view>
            </view>
            <Empty v-if="state.listData.length == 0" title="暂无列表" />
        </scroll-view>
    </view>
</template>
    
<script setup>
import { reactive, getCurrentInstance, onMounted } from "vue"
import { getAuthorization, setAuthorization } from "@/utils/auth.js"
import { onLoad } from '@dcloudio/uni-app'

import {
    NoDisplayUser,
    NoDisplayUserDel, // 移除黑名单
} from "@/api/person/index.js"

let { proxy } = getCurrentInstance()

const state = reactive({
    checked: false,
    PageIndex: 1,
    PageSize: 20,
    listData: []
})

const NoDisplayUserFn = async () => {
    let params = {
        PageIndex: state.PageIndex,
        PageSize: state.PageSize
    }
    uni.showLoading()
    let data = await proxy.$get(NoDisplayUser, params)
    uni.hideLoading()
    if (data.code == 200) {
        state.listData = state.listData.concat(data.data)
    }
}

// 移除黑名单
const removeNoDisplayUse = async (item) => {
    try {
        uni.showLoading()
        let data = await proxy.$del(NoDisplayUserDel(item.ID), params)
        uni.hideLoading()
        if (data.code == 200) {
            uni.showToast({
                title:"黑名单移除成功",
                icon:"none"
            })
            NoDisplayUserFn()
        }
    } catch (error) {
        uni.hideLoading()
    }
}

const upper = (e) => {
}
const lower = (e) => {
    state.PageIndex++
    NoDisplayUserFn()
}

// 简介
const strInfo = (item) => {
    let sexStr = item.Sex == 0 ? '女' : '男'
    let ageStr = item.Age ? '/' + item.Age : ''
    let ConstellationStr = item.Constellation ? '/' + item.Constellation : ''
    return sexStr + ageStr + ConstellationStr
}

onLoad((options) => {
})

onMounted(() => {
    NoDisplayUserFn()
})



</script>
    
<style lang="scss" scoped>
.sustem-setting {
    padding-top: 30rpx;
    min-height: calc(100vh - 120rpx);
}

.van-cell-group {
    margin-bottom: 30rpx;
}

.blacklist-item,
.blacklist-item-left {
    display: flex;
    align-items: center;
}

.blacklist-item {
    padding: 20rpx;
    justify-content: space-between;

    .name-base-info {
        margin-left: 20rpx;
    }

    .name {
        font-size: 32rpx;
        color: #262626;
    }

    .base-info {
        font-size: 24rpx;
        color: #999999;
        margin-top: 10rpx;

    }

    .blacklist-item-right {
        text-align: center;
        font-size: 20rpx;
        color: #999999;

        img {
            width: 40rpx;
        }
    }
}

.scroll-Y {
    height: calc(100vh - 120rpx);
}
</style>
    